import {ref, onMounted, onUnmounted, Ref} from "vue";

const useClickOutside = (elementRef:Ref<null | HTMLElement>) => {
    const isClickOutside = ref(false)
    // e事件对象，什么事件都能获取到这里使用的是点击事件
    // MouseEvent事件对象类型
    const handler = (e: MouseEvent) => {
        // elementRef:接受的是DropDown中的dropdownRef
        if(elementRef.value){
            // 判断点击位置是否在元素内
            if(elementRef.value.contains(e.target as HTMLElement)){
                isClickOutside.value = false
            }else {
                isClickOutside.value = true
            }
        }
    }
    onMounted(() => {
        document.addEventListener('click', handler)
    })
    onUnmounted(() => {
        document.removeEventListener('click', handler)
    })
    return isClickOutside
}

export default useClickOutside
